<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Basic Layout - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../easyui/demo/demo.css">
		<script type="text/javascript" src="../easyui/jquery.min.js"></script>
		<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
	</head>

	<body>

		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'north'" style="height:70px;text-align: center;">
				<h2>Background-System</h2>
				<p>老子就是牛逼怎么滴！！！！！！！！！！！！！</p>
				
			</div>
			<div data-options="region:'south',split:true" style="height:50px;"></div>
			<div data-options="region:'east',split:true" title="East" style="width:200px;"></div>

			<!--有风琴-->
			<div data-options="region:'west',split:true" title="West" style="width:200px;">

				<div class="easyui-accordion">
					<div title="About" data-options="iconCls:'icon-ok'" data-options="border:false,fit:true">

						<ul class="easyui-tree wu-side-tree">

							<li iconCls="icon-large-chart">
								<a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="../easyui/demo/layout/temp/layout-2.html" iframe="1" style="color: white;text-decoration: none">用户信息</a>
							</li>
							<li iconCls="icon-large-smartart">
								<a href="javascript:void(0)" data-icon="icon-users" data-link="../easyui/demo/layout/temp/layout3.html" iframe="1" style="color: white;text-decoration: none">新闻管理</a>
							</li>
							<li iconCls="icon-man">
								<a href="javascript:void(0)" data-icon="icon-user-group" data-link="../easyui/demo/layout/temp/layout-5.html" iframe="1" style="color: white;text-decoration: none">评论模块</a>
							</li>
							<li iconCls="icon-large-shapes">
								<a href="javascript:void(0)" data-icon="icon-user-group" data-link="../easyui/demo/layout/temp/layout-4.html" iframe="1" style="color: white;text-decoration: none">分类树</a>
							</li>
						</ul>

					</div>
					<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
						<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
					</div>
					<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
						<ul class="easyui-tree">
							<li>
								<span>Foods</span>
								<ul>
									<li>
										<span>Fruits</span>
										<ul>
											<li>apple</li>
											<li>orange</li>
										</ul>
									</li>
									<li>
										<span>Vegetables</span>
										<ul>
											<li>tomato</li>
											<li>carrot</li>
											<li>cabbage</li>
											<li>potato</li>
											<li>lettuce</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<!--主体-->
			<div id="wu-tabs" class="easyui-tabs" data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">

				<div title="首页" data-options="href:'temp/layout-1.html',closable:false,iconCls:'icon-tip',cls:'pd3'">

				</div>

			</div>

		</div>

	</body>
	<script type="text/javascript">
		$(function() {
			$('.wu-side-tree a').bind("click", function() {
				var title = $(this).text();
				var url = $(this).attr('data-link');
				var iconCls = $(this).attr('data-icon');
				var iframe = $(this).attr('iframe') == 1 ? true : false;
				addTab(title, url, iconCls, iframe);
			});
		})

		function addTab(title, href, iconCls, iframe) {
			var tabPanel = $('#wu-tabs');
			if(!tabPanel.tabs('exists', title)) {
				var content = '<iframe scrolling="auto" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';
				if(iframe) {
					tabPanel.tabs('add', {
						title: title,
						content: content,
						iconCls: iconCls,
						fit: true,
						cls: 'pd3',
						closable: true
					});
				} else {
					tabPanel.tabs('add', {
						title: title,
						href: href,
						iconCls: iconCls,
						fit: true,
						cls: 'pd3',
						closable: true
					});
				}
			} else {
				tabPanel.tabs('select', title);
			}
		}


	</script>

</html>